<template>
  <n-card :bordered="false" class="proCard">
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>

    <BasicTable
      :columns="tableColumns"
      :request="loadDataTable"
      :row-key="(row:ListData) => row.id"
      ref="actionRef"
      :actionColumn="actionColumn"
      @update:checked-row-keys="onCheckedRow"
      :scroll-x="1090"
    />
  </n-card>
  <n-modal v-model:show="showModal">
    <n-card
      style="width: 600px"
      title="商品信息"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header-extra> </template>
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡1卡号：{{ row.gift_card_no_1 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px"
        >礼品卡1密码c：{{ row.gift_card_pwd_1 }}</div
      >
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡1余额c：{{ row.gift_account_1 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px"
        >礼品卡1使用次数：{{ row.gift_card1_use_times }}</div
      >
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡2卡号：{{ row.gift_card_no_2 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡2密码：{{ row.gift_card_pwd_2 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">礼品卡2余额：{{ row.gift_account_2 }}</div>
      <div style="margin-bottom: 12px; font-size: 14px"
        >礼品卡2使用次数：{{ row.gift_card2_use_times }}</div
      >
      <div style="margin-bottom: 12px; font-size: 14px">信用卡卡号：{{ row.credit_card_no }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">信用卡密码：{{ row.credit_card_cvv }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">信用卡有效期：{{ row.validity }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">商品名称：{{ row.product_name }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">商品id：{{ row.product_id }}</div>
      <div style="margin-bottom: 12px; font-size: 14px">销售价：{{ row.sell_price }}</div>
      <div>采购价：{{ row.purchase_price }}</div>
      <template #footer> </template>
    </n-card>
  </n-modal>

  <n-modal v-model:show="rolesModal">
    <n-card
      style="width: 600px"
      title="原因"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header-extra> </template>
      <n-input v-model:value="reason" type="textarea" placeholder="输入原因" />
      <template #footer>
        <n-button type="primary" @click="sureRolesDistribution" :loading="loading">提交</n-button>
      </template>
    </n-card>
  </n-modal>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { getTableList } from '@/api/table/list';
  import { columns, ListData } from './columns';
  import { useRouter } from 'vue-router';
  import { commitTask, showPeopleTask } from '@/api/table/list';
  const schemas: FormSchema[] = [
    {
      field: 'date',
      component: 'NDatePicker',
      label: '根据分配时间查询',
      defaultValue: new Date().getTime(),
      componentProps: {
        type: 'date',
        clearable: true,
        valueFormat: 'yyyy-MM-dd',
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'order_number',
      component: 'NInput',
      label: '根据订单编号查询',
      componentProps: {
        placeholder: '请输入订单编号',
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
  ];

  const router = useRouter();
  const actionRef = ref();
  const showModal = ref(false);
  // 吴丹绮 郭姐 吴娇杰 陈萍 吕灵娜
  const roles = ref([
    {
      name: '吴丹绮',
      value: 'wudanqi',
    },
    {
      name: '郭姐',
      value: 'guojie',
    },
    {
      name: '吴娇杰',
      value: 'wujiaojie',
    },
    {
      name: '陈萍',
      value: 'chenping',
    },
    {
      name: '吕灵娜',
      value: 'lulingna',
    },
  ]);

  const [register, { getFieldsValue }] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 200,
    schemas,
  });

  const row = ref<any>({});
  // 订单详情
  function sendMail(e) {
    row.value = e;
    showModal.value = true;
  }

  const tableColumns = columns(sendMail, showRolesModal, chooseUnSumit);

  const $message = window['$message'];
  let isFirst = true;
  function formatDate(time) {
    var date = new Date(parseInt(time));
    var year = date.getFullYear();
    var mon = (date.getMonth() + 1 + '').padStart(2, '0');
    var day = date.getDate();
    return year + '-' + mon + '-' + day;
  }
  const loadDataTable = async (res) => {
    const params = getFieldsValue();
    if (JSON.stringify(params) == '{}') return;

    return await showPeopleTask({ ...{ ...params, date: formatDate(params.date) }, ...res });
  };

  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
  }

  function reloadTable() {
    actionRef.value.reload();
  }

  function handleSubmit(values: Recordable) {
    console.log(values);
    reloadTable();
  }

  function handleReset(values: Recordable) {
    console.log(values);
  }
  // 点击完成时候提交
  function showRolesModal(e) {
  console.log(e)
  const params = getFieldsValue();
    commitTask({
      create_date: formatDate(params.date),
      status: 1,
      order_number: e.eBay_order_number,
      gift_card_no1: e.gift_card_no_1,
      gift_account_1: e.gift_account_1,
      gift_card_no2: e.gift_card_no_2,
      gift_account_2: e.gift_account_2,
      purchase_price: e.purchase_price,
    }).then((res) => {
      $message.success('提交完成任务成功');
      reloadTable();
    });
  }
  const curItem = ref<any>({});
  const reason = ref('');
  const rolesModal = ref(false);
  const loading = ref(false);
  function chooseUnSumit(e) {
    reason.value = '';
    curItem.value = e;
    rolesModal.value = true;
  }
  // 点击未完成时候提交
  function sureRolesDistribution() {
    if (reason.value == '') {
      $message.error('请输入原因');

      return;
    }
    loading.value = true;
    const e = curItem.value;
    const params = getFieldsValue();
    commitTask({
        create_date: formatDate(params.date),
       status: 0,
       msg: reason.value,
       order_number: e.eBay_order_number,
       gift_card_no1: e.gift_card_no_1,
       gift_account_1: e.gift_account_1,
       gift_card_no2: e.gift_card_no_2,
       gift_account_2: e.gift_account_2,
       purchase_price: e.purchase_price,
    })
      .then((res) => {
        $message.success('提交完成任务成功');
        reloadTable();
        rolesModal.value = false;
      })
      .finally(() => {
        loading.value = false;
      });
  }
</script>

<style lang="less" scoped></style>
